<template>
	<view class="pagesbg">
		<view class="operateBox">
			<pagehead>{{ sysProduct == '' ? '添加' : '编辑' }}收货地址</pagehead>
			<view class="operateBox-tabs">
				<view class="operateBox-formBox">
					<view class="operateBox-formBox-list-header">收货人</view>
					<view class="operateBox-formBox-list operateBox-formBox-listBg" :class="{ 'operateBox-formBox-list-input--active': isFocus == 0, showCloseBtn: name != '' }">
						<input type="text" placeholder="名字" v-model="name" placeholder-class="inputStyle"
						@blur="blurInput(0)"
						@focus="focusInput(0)"/>
					</view>
					<view class="operateBox-formBox-list-header">手机号</view>
					<view class="operateBox-flex">
						<view class="operateBox-formBox-list operateBox-formBox-listBg" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: phone != '' }">
							<input type="number" placeholder="手机号" placeholder-class="inputStyle" v-model="phone"
							@blur="blurInput(1)"
							@focus="focusInput(1)"/>
						</view>
					</view>
					<view class="operateBox-formBox-list-header">所在地址</view>
					<view class="operateBox-formBox-list operateBox-formBox-listBg" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: address != '' }">
						<view class="regionBox">
							<uni-region @region="resgclick" :regionStr="sendAddress" />
						</view>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__see">
								<image :src="IMAGE_STATIC+'/images/icon-addr.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
					<view class="operateBox-formBox-list-header">详细地址</view>
					<view class="operateBox-formBox-list operateBox-formBox-listBg" :class="{ 'operateBox-formBox-list-input--active': isFocus == 3, showCloseBtn: details != '' }">
						<textarea placeholder="小区楼栋" placeholder-class="inputStyle" v-model="details" cols="30" rows="10" 
						@blur="blurInput(3)"
						@focus="focusInput(3)"/>
					</view>
				</view>
			</view>
			<view class="address-r" @tap="checkActive()">
				<image v-if="active == 1" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode=""></image>
				<image v-else :src="IMAGE_STATIC+'/images/radio.png'" mode=""></image>
				<view class="mo">设为默认地址</view>
			</view>
			<view class="operateBox-btn">
				<view class="operateBox-btn-chioce" @tap.stop="$u.throttle(confirm,1000)">保存</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import uniRegion from './components/uni-region/uni-region.vue'
// import region from './components/uni-region/chinaRegion.json'
	export default {
		components: { uniRegion },
		data() {
			return {
				IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
				active: 0,
				name: '',
				phone: '',
				provice: '',
				city: '',
				area: '',
				address: '',
				details: '',
				invite: '', 
				isFocus: null,
				eyeShow: this.$url.assetsPath+'/images/icon-eye-open.png',
				eyeHide: this.$url.assetsPath+'/images/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }],
				defaultFlag: '',
				defaultAddress: 0,
				toggle: true,
				sysProduct: {},
				sendAddress: '',
			}
		},
		onLoad(options) {
			if(options.value1){
				this.sysProduct = JSON.parse(decodeURIComponent(options.value1));
				let address  = (this.sysProduct.address).split('·')
				console.log("address:",address);
				this.name = this.sysProduct.name;
				this.phone = this.sysProduct.tel;
				this.provice = this.sysProduct.province;
				this.city = this.sysProduct.city;
				this.area = this.sysProduct.town;
				this.street = this.sysProduct.street;
				this.address = address[0] +'·'+ address[1] +'·'+ address[2] +'·'+ this.sysProduct.street;
				this.sendAddress = address[0] + address[1] + address[2] + this.sysProduct.street;
				this.details = address[address.length  -1];
				this.active = Number(this.sysProduct.isdefault);
				console.log("sendAddress:",this.sendAddress,',address',this.address);
				console.log("this.sysProduct:",this.sysProduct);

			}else{
				this.sysProduct = '';
			}
		},
		onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				
			},
			// 新增地址
			confirm(){
				if (this.name == ''){
					return this.$tools.toast('请输入收货人姓名');
				}
				if(this.name.length > 7){
					return this.$tools.toast('最多可输入七个文字');
				}
				if (this.phone == '' ) {
					return this.$tools.toast('请输入手机号');
				}
				var reg = /^1[3456789]\d{9}$/;
				if(!reg.test(this.phone)){
					return this.$tools.toast('请输入正确的手机号码！！！');
				}
				if (this.sendAddress == '' ) {
					return this.$tools.toast('请输入所在地址');
				}
				if (this.details == '' || this.details == undefined){
					return this.$tools.toast('请输入详细地址');
				}
				if(this.toggle){
					this.toggle = false;
					let address = this.address +'·'+this.details
					var data = {
						name: this.name,
						tel: this.phone,
						province: this.provice,
						city: this.city,
						town: this.area,
						street:this.street,
						address:address,
						isdefault: this.active.toString(),
						user_address_oper: this.sysProduct.address_id?'user_address_edit':'user_address_add',
					};
					if(this.sysProduct.address_id){
						data['address_id'] = this.sysProduct.address_id
					}
					console.log("data：",data);
					this.$Ajax('/api/user/address/updateUserAddress',
					data,
					res => {
							this.toggle = true;
							let msg=this.sysProduct.address_id?'修改地址成功':'新增地址成功'
							this.$tools.toastBack(msg,1);
						},err =>{
						this.toggle = true;
					})
				}
			},
			resgclick(ele) {
				console.log(ele, '选择的城市'); // join()
				let val = ele.join();
				this.provice = ele[0];
				this.city = ele[1];
				this.area = ele[2] ;
				this.street =  ele[3]?ele[3]:''
				this.sendAddress = val.replace(/,/g,'');
				this.address = val.replace(/,/g,'·');
				// console.log("provice：",this.provice);
				// console.log("city：",this.city);
				// console.log("area：",this.area);
				// console.log("sendAddress：",this.sendAddress);
				// console.log("address：",this.address);
			},
			checkActive(){
				if(this.active == 0){
					this.active = 1;
				}else{
					this.active = 0;
				}
				console.log("active:",this.active);
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 添加地址样式
	.operateBox{
		&-flex{
			@include flexBetween;
			position: relative;
		}
		&-bg{
			background: $globalColor-style;
			border-radius: 0px 0px 10px 10px;
			min-height: 310rpx;
		}
		&-tabs{
			display: block;
			margin: 0rpx 32rpx;
			&-item{
				@include flexLeft;
				align-items: flex-end;
				margin: 0 0 24rpx;
				&__title{
					width: 26%;
					color: $globalColor-fontStyle;
					font-size: 28rpx;
					font-weight: bold;
					position: relative;
					padding-bottom: 6rpx;
					&--active::before{
						content: '';
						width: 36rpx;
						height: 6rpx;
						background: $globalColor-style;
						position: absolute;
						bottom: 0;
						transform: translateX(50%);
					}
				}
			}
		}
		&-formBox{
			&-list{
				margin: 5rpx 0 32rpx;
				@include flexLeft;
				width: 100%;
				border-radius: 20rpx;
				padding: 28rpx 34rpx;
				border: 1px solid #E2E8F0;
				&-icon{
					width: 48rpx;
					height: 48rpx;
					margin-right: 32rpx;
				}
				&--width40{
					width: 45%;
				}
				&-title{
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					width: 15%;
					// background: url(../../static/public/icon-operate-next.png) no-repeat;
					background-position: calc(100% - 20rpx) center;
					background-size: 20rpx 12rpx;
				}
				&-titleWords{
					@include flexLeft;
					flex-wrap: wrap;
					padding: 30rpx 0;
				}
				&-words{
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0,0,0,0.9);
					margin: 10rpx 0 32rpx;
					&--active{
						color: $globalColor-style;
					}
				}
				&-header{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0,0,0,0.9);;
					margin: 20rpx 0;
				}
				&-tips{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #969699;
					margin: 0rpx 0 20rpx;
				}
				&.showCloseBtn {
					.operateBox-formBox-list-image__clear--active{
						display: flex;
					}
				}
				input{
					flex: 1;
					font-size: 28rpx;
					border: none;
					text-align: left;
					color: rgba(0,0,0,0.9);
				}
				textarea{
					flex: 1;
					font-size: 28rpx;
					border: none;
					height: 150rpx;
					color: rgba(0,0,0,0.9);
				}
				&-image{
					@include flexRight;
					position: relative;
					z-index: 9;
					&__clear{
						margin-right: 14rpx;
						image{
							width: 30rpx;
							height: 30rpx;
						}
						&--active{
							display: none;
						}
					}
					&__see{
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
					&__all{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						background: linear-gradient(130deg, #FFF493 0%, #FFA41A 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					&__code{
						image{
							width: 150rpx;
							height: 15rpx;
						}
						.code{
							background: linear-gradient(130deg, #FFF493 0%, #FFA41A 100%);
							border-radius: 76rpx;
							font-size: 24rpx;
							font-family: Noto Sans SC, Noto Sans SC;
							font-weight: 400;
							color: #141414;
							padding: 10rpx 14rpx;
							text-align: center;
							white-space: nowrap;
						}
						.code--gery{
							background: #5C5C5C;
							border-radius: 76rpx;
							font-size: 24rpx;
							font-family: Noto Sans SC, Noto Sans SC;
							font-weight: 400;
							color: #808080;
							padding: 10rpx 14rpx;
							text-align: center;
							white-space: nowrap;
						}
					}
				}
				.tuCode{
					width: 174rpx;
					height: 72rpx;
				}
			}
			&-lists{
				width: 70%;
			}
			&-listBg{
				background: #F9F9F9;
				border-radius: 12rpx;
				border: none;
				box-sizing: border-box;
			}
			&-listBorder{
				border-radius: 0;
				border-bottom: 1px solid #333333;
				border-top: none;
				border-left: none;
				border-right: none;
				padding: 28rpx 0rpx;
				margin: 0rpx 0 0;
			}
		}
		&-btn{
			width: 100%;
			&--between{
				@include flexBetween;
			}
			&--m{
				margin: 40rpx 31rpx;
			}
			&-chioce{
				// width: 100%;
				height: 90rpx;
	            line-height: 90rpx;
	            background: #AD2926;
	            border-radius: 118rpx;
	            width: 92%;
	            margin: 20rpx auto;
	            text-align: center;
	            color: #fff;
	            font-size: 30rpx;
			}
			&-title{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ACACAC;
				text-align: center;
				&--active{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					background: linear-gradient(130deg, #FFF493 0%, #FFA41A 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}	
		}
		
		&-bottom{
			@include flexLeft;
			&-img{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			&-title{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				&-choice{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		&-agreement{
			margin: 40rpx 0 0;
			@include flexLeft;
			label{
				border: 1px solid $globalColor-border;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				margin-right: 11rpx;
			}
			.checkbox-active{
				background: url($uni-static-dir+'/images/radio-checked.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border: 1px solid transparent;
				// .checkbox{
				// 	margin: 5rpx;
				// 	background: $globalColor-style;
				// 	width: 18rpx;
				// 	height: 18rpx;
				// 	border-radius: 50%;
				// }
			}
			&-title{
				color: #666666;
				font-size: 24rpx;
			}
			&-name{
				color: $globalColor-style;
				font-size: 24rpx;
			}
		}
		&-bottomBox{
			// margin: 15% auto 50rpx;
			background: #2B2B2B;
			width: 100%;
			padding: 0 0;
			position: fixed;
			bottom: 0rpx;
			padding-bottom: 20rpx;
			z-index: 99;
		}
		&-bottomBoxFor{
			position: absolute;
			bottom: 5rpx;
			width: 100%;
			padding: 0 31rpx;
		}
		&-titleBox{
			@include flexLeftColumn;
			&__title{
				@include flexLeft;
				margin-bottom: 8rpx;
				.title{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.num{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: $globalColor-style;
				}
				.tips{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.6);
				}
			}
		}
		&-flexBetween{
			@include flexLeft;
			margin-top: 16rpx;
			&__tips{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				background: #AD2926;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}	
	}
	.pagesbg{
		background: #fff;
	}
	.operateBox-btn-chioce{
		width: 91.5%;;
	}
	.address{
		&-r{
			margin: 0 32upx;
			@include flexLeft;
			image{
				width: 40upx;
				height: 40upx;
			}
			.mo{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000;
				margin-left: 16rpx;
			}
		}
	}
	
	.regionBox{
		flex: 1;
		min-height: 40rpx;
	}
	
	/deep/.uni-picker-custom{
		background: #2B2B2B !important;
	}
	/deep/ .uni-picker-action.uni-picker-action-confirm{
		font-size: 32px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		line-height: 48px;
		background: linear-gradient(130deg, #FFF493 0%, #FFA41A 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
</style>
